<template>
    <div>
        <section class="shop-container" ref="shopviewrap" :style="{ height: wrapperHeight + 'px' }">
            <section class="shop-view-nodata" v-if="false">
                <img src="http://github.elemecdn.com/eleme/fe-static/1cb05f59/media/empty/no-food.png" alt="">
                <p>没有商品</p>
                <p>该商家还未上传商品</p>
            </section>
            <section class="shop-view">
                <main class="shop-main">
                    <ul class="menu-category-table">
                        <li class="menu-category-table-cell" :class="{active:index == menuIndex}" v-for="(item,index) in menuList" :key="index" @click="chooseMenu(index,$event)">
                            <img src="item.icon_url" alt="" v-if="item.icon_url">
                            <span class="title">{{item.name}}</span>
                            <span class="cartnum" v-if="false">1</span>
                        </li>
                    </ul>
                    <section class="menu-scroller">
                        <div class="scroller-inset" ref="menuFoodList" id="menuFoodList">
                            <dl v-for="(item,index) in menuList" :key="index">
                                <dt>
                                    <div class="category-title">
                                        <strong class="category-name">{{item.name}}</strong> {{item.description}}
                                    </div>
                                    <div class="category-more">
                                        <i class="moreicon"></i>
                                        <p class="popup" v-if="false">
                                            <span>促销产品和热卖产品</span>
                                        </p>
                                    </div>
                                </dt>
                                <dd v-for="food in item.foods" :key="food.item_id">
                                    <figure class="foodimg">
                                        <img src="" alt="">
                                    </figure>
                                    <aside>
                                        <h2 class="foodtitle">{{food.name}}</h2>
                                        <p class="fooddec" v-if="food.description">{{food.description}}</p>
                                        <p class="foodsales">
                                            <span>月售{{food.month_sales}}份</span>
                                            <span>好评率{{food.satisfy_rate}}%</span>
                                        </p>
                                        <div class="foodbottom">
                                            <span class="price"><i>￥</i>{{food.specfoods[0].price}}</span>
                                            <div class="cartbtn">
                                                <div class="cartview-type" v-if="!food.specifications.length">
                                                    <transition name="showReduce">
                                                        <span class="add" @touchstart="addToCart(food.category_id,food.item_id,food.specfoods[0].food_id,food.specfoods[0].name,food.specfoods[0].price,'',food.specfoods[0].packing_fee,food.specfoods[0].sku_id,food.specfoods[0].stock, $event)">
                                                            <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use></svg>
                                                        </span>
                                                    </transition>
                                                    <transition name="fade">
                                                        <span class="text">1</span>
                                                    </transition>
                                                    <span class="reduce">
                                                        <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use></svg>
                                                    </span>
                                                </div>
                                                <div v-else class="cartview-button">
                                                    <span class="specification">
                                                        选规格
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </aside>
                                </dd>
                            </dl>
                        </div>
                    </section>
                </main>
                <aside class="shop-rest" v-if="false">商家休息中,暂不接单</aside>
    
                <footer class="cartview">
                    <div class="cart-mask" v-show="showCartList" @click="toggleCartList"></div>
                    <div class="cart-list" v-show="showCartList">
                        <header>
                            <span class="title">购物车</span>
                            <div class="empty-data">
                                <svg>
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-remove"></use>
                                </svg>
                                <span class="clear-cart">清空</span>
                            </div>
                        </header>
                        <section class="cartvie-list">
                            <ul class="cartview-table">
                                <li class="cartview-table-cell" v-for="(item, index) in cartFoodList">
                                    <div class="cartview-title">{{item.name}}</div>
                                    <div class="cartview-price"><i>￥</i>{{item.price}}</div>
                                    <div class="cartview-btn">
                                        <div class="cartview-type">
                                            <span class="add" @click="addToCartContinue(item.category_id, item.item_id, item.food_id, item.name, item.price, item.specs)">
                                                <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-minus"></use></svg>
                                            </span>
                                            <span class="text">{{item.num}}</span>
                                            <span class="reduce" @click="removeOutCartContinue()">
                                                <svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cart-add"></use></svg>
                                            </span>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </section>
                    </div>
                    <div class="cart-box">
                        <div class="attr-quantity" attr-quantity="1" @click="toggleCartList"></div>
                        <div class="attr-info">
                            <p>¥0</p>
                            <p>配送费¥22</p>
                        </div>
                        <div class="attr-st">
                            还差¥40起送
                        </div>
                        <div class="attr-sett">
                            去结算
                        </div>
                    </div>
                </footer>
    
            </section>
        </section>
    </div>
</template>

<script>
import {
    mapState,
    mapActions,
    mapGetters,
    mapMutations
} from 'vuex'
export default {
    data() {
        return {
            shopId: '',
            menuList: [], // 
            wrapperHeight: '', // 高度
            shopListTop: [], // 商品高度集合
            menuIndex: 0, // 菜单索引
            showCartList: false, // 购物车列表显示
            showMoveDot: [], //控制下落的小圆点显示隐藏
            categoryNum: [], //商品类型右上角已加入购物车的数量
            cartFoodList: [], // 点击购物车列表
            elLeft: 0, //当前点击加按钮在网页中的绝对top值
            elBottom: 0, //当前点击加按钮在网页中的绝对left值
            // cartList: {}, // 加入购物车的商品列表
            totalPrice: 0, //总共价格
            receiveInCart: false, //购物车组件下落的圆点是否到达目标位置
        }
    },
    created() {
        this.shopId = this.$route.query.id;
    },
    computed: {
        ...mapGetters([
            'cartList'
        ]),
        //当前商店购物信息
        shopCart: function () {
            return { ...this.cartList[this.shopId] };
        },
    },
    beforeMount() {

    },
    mounted() {
        this.wrapperHeight = document.documentElement.clientHeight - this.$refs.shopviewrap.getBoundingClientRect().top;
        this.initData()

    },
    methods: {
        ...mapActions([
            'ADD_CART',
        ]),
        initData() {
            // 商品
            this.$fetch('GET', '/shopping/v2/menu', {
                restaurant_id: this.shopId
            }).then(res => {
                this.menuList = res;
                // console.log(res)
                this.getFoodListHeight();
            });

            // 确认订单所需的信息
            // this.$fetch('GET', '/v1/carts/checkout', {
            //     'come_from':'web',
            //     'geohash':'wx4sn74bghnr',
            //     'entities':[[{
            //         'id':91514056,
            //         'attrs':[],
            //         'extra':{},
            //         'name':'哈哈镜牛蛙辣',
            //         'packing_fee':0,
            //         'price':40,
            //         'quantity':2,
            //         'sku_id':'13983989632',
            //         'specs':[],
            //         'stock':9980
            //     }]]
            // }).then(res => {

            //     console.log(res)

            // });


            // {
            //     'come_from':'web',
            //     'entities':[[{ 
            //         id: 91514056, 
            //         sku_id: "13983989632", 
            //         quantity: 2, 
            //         name: "哈哈镜牛蛙辣", 
            //         price: 40, 
            //         packing_fee: 0}]],
            //     'geohash':"wx4sn74bghnr"
            // }

        },
        // 获取食品列表的高度，存入shopListTop
        getFoodListHeight() {
            this.$nextTick(function () {
                const listContainer = this.$refs.menuFoodList;
                const listArr = Array.from(listContainer.children);
                listArr.forEach((item, index) => {
                    this.shopListTop[index] = item.offsetTop;
                    this.$refs.menuFoodList.addEventListener('touchstart', () => {
                        if (this.$refs.menuFoodList.scrollTop >= this.shopListTop[index]) {
                            this.menuIndex = index;
                        }
                    }, false)
                    this.$refs.menuFoodList.addEventListener('touchmove', () => {
                        if (this.$refs.menuFoodList.scrollTop >= this.shopListTop[index]) {
                            this.menuIndex = index;
                        }
                    }, false)
                    this.$refs.menuFoodList.addEventListener('touchend', () => {
                        if (this.$refs.menuFoodList.scrollTop >= this.shopListTop[index]) {
                            this.menuIndex = index;
                        }
                    }, false)
                    this.$refs.menuFoodList.addEventListener('scroll', () => {
                        if (this.$refs.menuFoodList.scrollTop >= this.shopListTop[index]) {
                            this.menuIndex = index;
                        }
                    }, false)
                });
            })
        },
        // 左边菜单选项
        chooseMenu(index, event) {
            this.menuIndex = index;
            this.$refs.menuFoodList.scrollTop = this.shopListTop[index];
        },
        toggleCartList() {
            console.log(this.cartFoodList.length)
            this.cartFoodList.length ? this.showCartList = !this.showCartList : true
        },
        addToCartContinue(category_id, item_id, food_id, name, price, specs){
            this.ADD_CART({ shopid: this.shopId,category_id, item_id, food_id, name, price, specs});
        },
        // 食品分类id     食品名字，食品价格，食品规格，额外费用，商品id,
        addToCart(category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock, event) {
            // 添加购物车
            this.ADD_CART({ shopid: this.shopId, category_id, item_id, food_id, name, price, specs, packing_fee, sku_id, stock });
            // 距浏览器的距离
            let elLeft = event.target.getBoundingClientRect().left;
            let elBottom = event.target.getBoundingClientRect().bottom;
            this.showMoveDot.push(true);
            this.showMoveDotFun(this.showMoveDot, elLeft, elBottom);
        },
        //显示下落圆球
        showMoveDotFun(showMoveDot, elLeft, elBottom) {
            this.showMoveDot = [...this.showMoveDot, ...showMoveDot];
            this.elLeft = elLeft;
            this.elBottom = elBottom;
        },
        beforeEnter(el) {
            el.style.transform = `translate3d(0,${37 + this.elBottom - this.windowHeight}px,0)`;
            el.children[0].style.transform = `translate3d(${this.elLeft - 30}px,0,0)`;
            el.children[0].style.opacity = 0;
        },
        afterEnter(el) {
            el.style.transform = `translate3d(0,0,0)`;
            el.children[0].style.transform = `translate3d(0,0,0)`;
            el.style.transition = 'transform .55s cubic-bezier(0.3, -0.25, 0.7, -0.15)';
            el.children[0].style.transition = 'transform .55s linear';
            this.showMoveDot = this.showMoveDot.map(item => false);
            el.children[0].style.opacity = 1;
            el.children[0].addEventListener('transitionend', () => {
                // this.listenInCart();
            })
            el.children[0].addEventListener('webkitAnimationEnd', () => {
                // this.listenInCart();
            })
        },
        /**
         * 初始化和shopCart变化时，重新获取购物车改变过的数据，赋值 categoryNum，totalPrice，cartFoodList，整个数据流是自上而下的形式，所有的购物车数据都交给vuex统一管理，包括购物车组件中自身的商品数量，使整个数据流更加清晰
         */
        initCategoryNum() {
            let newArr = [];
            let cartFoodNum = 0;
            this.totalPrice = 0;
            this.cartFoodList = [];
            this.menuList.forEach((item, index) => {
                if (this.shopCart && this.shopCart[item.foods[0].category_id]) {
                    let num = 0;
                    Object.keys(this.shopCart[item.foods[0].category_id]).forEach(itemid => {
                        Object.keys(this.shopCart[item.foods[0].category_id][itemid]).forEach(foodid => {
                            let foodItem = this.shopCart[item.foods[0].category_id][itemid][foodid];
                            num += foodItem.num;
                            if (item.type == 1) {
                                this.totalPrice += foodItem.num * foodItem.price;
                                if (foodItem.num > 0) {
                                    this.cartFoodList[cartFoodNum] = {};
                                    this.cartFoodList[cartFoodNum].category_id = item.foods[0].category_id;
                                    this.cartFoodList[cartFoodNum].item_id = itemid;
                                    this.cartFoodList[cartFoodNum].food_id = foodid;
                                    this.cartFoodList[cartFoodNum].num = foodItem.num;
                                    this.cartFoodList[cartFoodNum].price = foodItem.price;
                                    this.cartFoodList[cartFoodNum].name = foodItem.name;
                                    this.cartFoodList[cartFoodNum].specs = foodItem.specs;
                                    cartFoodNum++;
                                }
                            }
                        })
                    })
                    newArr[index] = num;
                } else {
                    newArr[index] = 0;
                }
            });
            this.totalPrice = this.totalPrice.toFixed(2);
            this.categoryNum = [...newArr];

        }
    },
    watch: {
        shopCart: function (value) {
            this.initCategoryNum();
        },
    },
    beforeDestroy() {

    }
}
</script>

<style lang="stylus" scoped>
    .shop-container
        height:100%
    .shop-view
        height: 100%;
        padding-bottom: 1.28rem;
        background-color: #fff;
    .shop-main
        display: flex;
        height: 100%;
    .menu-category-table
        width: 2.27rem;
        overflow-y: auto;
        height: 100%;
        background-color: #f8f8f8;
        -webkit-overflow-scrolling: touch;
        .menu-category-table-cell
            position: relative;
            padding: .466667rem .2rem;
            border-bottom: 1px solid #ededed;
            font-size: .346667rem;
            color: #666;
            .title
                font-size: .346667rem;
                color: #666;
            .cartnum
                position: absolute;
                top: 0.06rem;
                right: 0.06rem;
                background-color: #ff461d;
                line-height: 0.35rem;
                text-align: center;
                border-radius: 50%;
                border: 0.025rem solid #ff461d;
                min-width: 0.35rem;
                height: 0.35rem;
                font-size: 0.3rem;
                color: #fff;
                font-family: Helvetica Neue, Tahoma, Arial;
            img
                width: .24rem;
                height: .333333rem;
        .active
            background-color: #fff;
            font-weight: bolder;
            &.active
                &:after
                    content: "";
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                    width: .08rem;
                    background-color: #3190e8;

    .menu-scroller
        position: relative;
        height: 100%;
        flex:1;
        .scroller-inset
            height:100%
            height: 100%;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        dt
            position: relative;
            padding: .2rem .26rem;
            background-color: #f1f1f1;
            display:flex;
            .category-title
                flex:1;
                display:flex;
                align-items:center;
                overflow: hidden;
                color: #999;
                font-size: .26rem;
                white-space: nowrap;
                overflow: hidden;
                .category-name
                    margin-right: .133333rem;
                    font-weight: 700;
                    font-size: .373333rem;
                    color: #666;
                    -webkit-box-flex: 0;
                    -ms-flex: none;
                    flex: none;
            .category-more
                width: .94rem;
                z-index: 2;
                background: #f1f1f1
                .moreicon
                  
                .popup
                    position:absolute;
        dd
            position: relative;
            background-color: #fff;
            margin: 0;
            padding: .4rem .26rem;
            margin-bottom: 1px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            min-height: 2.9rem;
            &:not(last-child)
                box-shadow: 0.4rem 0.013333rem 0 0 #ddd;
            figure
                flex:2;
                margin-right: 4%;
                display: block;
                width: 0;
                vertical-align: top;
                img
                    width: 100%;
                    border-radius: .06rem;
            aside
                flex:8;
                position: relative;
                display:flex;
                flex-direction: column;
                padding-bottom: .66rem;
                .foodtitle
                    font-size: .4rem;
                    font-weight: 700;
                    line-height: 1.1;
                    overflow: hidden;
                    display: flex;
                    justify-content: space-between;
                .fooddec
                    margin: .135rem 0;
                    font-size: .26rem;
                    color: #999;
                .foodsales
                    margin: .18rem 0;
                    color: #666;
                    font-size: .3rem;
                    line-height: 1;
                .foodbottom
                    position: absolute;
                    left: 0;
                    right:0;
                    bottom: 0;
                    font-weight: 700;
                    font-size: .426667rem;
                    line-height: .426667rem;
                    color: #f60;
                    display:flex;
                    justify-content: space-between;
                    align-items: center;
                    .price 
                        i 
                            font-weight: 400;
                            font-style:normal;
                            font-size: .293333rem;
                            display: inline-block;
                    .cartbtn
                        flex:1;
                        display:inline-block;
                        // width:40px;
                        // height:40px;
                        text-align:right;
                        svg 
                            width: 40px;
                            height: 40px;
                            vertical-align: middle;
                            fill: #3190e8;

    .shop-rest
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
        line-height: 1.3rem;
        font-size: .48rem;
        background-color: rgba(0,0,0,.7);
        color: #ccc;
        text-align: center;
    .cartview
        font-size: .42rem;
    .cart-box
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        padding-left: 2.1rem;
        background-color: #3d3d3f;
        height: 1.3rem;
        opacity: .95;
        z-index: 11;
        .attr-quantity
            position: absolute;
            left: .32rem;
            bottom: .133333rem;
            width: 1.493333rem;
            height: 1.493333rem;
            box-sizing: border-box;
            border-radius: 100%;
            background-color: #3190e8;
            border: .12rem solid #444;
            box-shadow: 0 -0.08rem 0.053333rem 0 rgba(0,0,0,.1);
            will-change: transform;
            &:after
                position: absolute;
                right: -.12rem;
                top: -.133333rem;
                line-height: 1;
                background-color: #ff461d;
                color: #fff;
                border-radius: .32rem;
                padding: .053333rem .133333rem;
                content: attr(attr-quantity);
                font-size: .266667rem;
        .attr-info
            font-size: .48rem;
            line-height: normal;
            color: #fff;
            p 
                &:first-child
                    font-size: .48rem;
                    line-height: normal;
                    color: #fff;
                &:last-child
                    color: #f5f5f5;
                    font-size: .266667rem;
        .attr-st
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 2.8rem;
            background-color: #4cd964;
            color: #fff;
            text-align: center;
            text-decoration: none;
            font-size: .4rem;
            font-weight: 700;
            line-height: 1.28rem;
            background-color: #535356;
        .attr-sett
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            width: 2.8rem;
            background-color: #4cd964;
            color: #fff;
            text-align: center;
            text-decoration: none;
            font-size: .4rem;
            font-weight: 700;
            line-height: 1.28rem;
    .cart-mask
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        opacity: .4;
        -webkit-transition: opacity .35s ease;
        transition: opacity .35s ease;
        z-index:10
    .cart-list
        position: fixed;
        bottom: 0;
        left: 0;
        padding-bottom: 1.3rem;
        width: 100%;
        background-color: #fff;
        z-index: 11;
        header
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: .25rem .3rem;
            background-color: #eceff1;
            .title
                padding-left: .133333rem;
                border-left: .093333rem solid #3190e8;
            .empty-data
                background-size: .26rem;
                color: #666;
                text-decoration: none;
                font-size: .34rem;
                padding-left: .4rem;
                height:100%;
                display:flex;
                align-items:center;
                svg
                    width: .3rem;
                    height: .34rem;
                    fill: #ddd;
                // .clear-cart
    .cartvie-list
        -webkit-overflow-scrolling: touch;
        max-height: 8rem;
        overflow: auto;
    .cartview-table
        .cartview-table-cell
            display:flex;
            align-items: center;
            padding: .2rem .334rem .2rem 0;
            min-height: 1.46rem;
            margin-left: .333333rem;
            .cartview-title
                flex:7;
                display: block;
                width: 0;
                line-height: normal;
            .cartview-price
                display: block;
                flex: 1.6;
                width: 0;
                color: #f60;
                text-align: right;
                white-space: nowrap;
                font-weight: 700;
                i
                    font-weight: 400;
                    font-style: normal;
                    font-size: 0.293333rem;
                    display: inline-block;
            .cartview-btn
                flex: 3.4;
                text-align: right;
    // 添减按钮
    .cartview-type
        display: inline-block;
        font-size: .346667rem;
        white-space: nowrap;
        display:flex;
        align-items:center;
        flex-direction:row-reverse
        svg
            width: 40px;
            height: 40px;
            vertical-align: middle;
            fill: #3190e8;
        .add,
        .reduce
            display: inline-block;
            padding: .093333rem;
            vertical-align: middle;
            text-decoration: none;
        .text
            text-align: center;
            color: #666;
            font-size: .373333rem;
            min-width: .4rem;
            max-width: 2em;
            overflow: hidden;
            display:inline-block;

    .cartview-button
        display: inline-block;
        font-size: .346rem;
        white-space: nowrap;
        // display:flex;
        // flex-direction:column-reverse;
        .specification
            color: #fff;
            background-color: #3199e8;
            text-decoration: none;
            padding: 0.15rem .2rem;
            font-size: .32rem;
            border-radius: .346667rem;
            line-height: .666667rem;

    .showReduce-enter-active, .showReduce-leave-active {
        transition: all .3s ease-out;
    }
    .showReduce-enter, .showReduce-leave-active {
        opacity: 0;
        transform: translateX(1rem);
    }
    .fade-enter-active, .fade-leave-active {
        transition: all .3s;
    }
    .fade-enter, .fade-leave-active {
        opacity: 0;
    }
    .fadeBounce-enter-active, .fadeBounce-leave-active {
        transition: all .3s;
    }
    .fadeBounce-enter, .fadeBounce-leave-active {
        opacity: 0;
        transform: scale(.7);
    }
</style>